<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="google-site-verification" content="xBT4GhYoi5qRD5tr338pgPM5OWHHIDR6mNg1a3euekI" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="DUDU的博客">
    <meta name="keyword"  content="博客,blog,技术博客,编程,前端">
    <link rel="shortcut icon" href="/img/favicon.ico">

    <title>
        
        npm + webpack使用指南 - DUDU的博客
        
    </title>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/aircloud.css">
    <link rel="stylesheet" href="/css/gitment.css">
    <!--<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">-->
    <link href="//at.alicdn.com/t/font_620856_pl6z7sid89qkt9.css" rel="stylesheet" type="text/css">
    <!-- ga & ba script hoook -->
    <script></script>
</head>

<body>

<div class="site-nav-toggle" id="site-nav-toggle">
    <button>
        <span class="btn-bar"></span>
        <span class="btn-bar"></span>
        <span class="btn-bar"></span>
    </button>
</div>

<div class="index-about">
    <i> 灵感来源于总结，成长来源于分享 </i>
</div>

<div class="index-container">
    
    <div class="index-left">
        
<div class="nav" id="nav">
    <div class="avatar-name">
        <div class="avatar">
            <img src="/img/avatar.jpg" />
        </div>
        <div class="name">
            <i>Du Heng</i>
        </div>
    </div>
    <div class="contents" id="nav-content">
        <ul>
            <li >
                <a href="/">
                    <i class="iconfont icon-shouye1"></i>
                    <span>主页</span>
                </a>
            </li>
            <li >
                <a href="/tags">
                    <i class="iconfont icon-biaoqian1"></i>
                    <span>标签</span>
                </a>
            </li>
            <li >
                <a href="/archive">
                    <i class="iconfont icon-guidang2"></i>
                    <span>存档</span>
                </a>
            </li>
            <li >
                <a href="/about/">
                    <i class="iconfont icon-guanyu2"></i>
                    <span>关于</span>
                </a>
            </li>
            
            <li>
                <a id="search">
                    <i class="iconfont icon-sousuo1"></i>
                    <span>搜索</span>
                </a>
            </li>
            
        </ul>
    </div>
    
        <div id="toc" class="toc-article">
    <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#webpack简介"><span class="toc-text">webpack简介</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#历史介绍"><span class="toc-text">历史介绍</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#webpack打包模块的源码"><span class="toc-text">webpack打包模块的源码</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#webpack配置文件"><span class="toc-text">webpack配置文件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#webpack-config-js文件配置（认识）"><span class="toc-text">webpack.config.js文件配置（认识）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#npm2-5以前"><span class="toc-text">npm2.5以前</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#处理css"><span class="toc-text">处理css</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#处理less"><span class="toc-text">处理less</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#处理ES6"><span class="toc-text">处理ES6</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#处理文件-base64"><span class="toc-text">处理文件 + base64</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#特殊符号"><span class="toc-text">特殊符号</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#字符串内使用的内置变量"><span class="toc-text">字符串内使用的内置变量</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#处理html"><span class="toc-text">处理html</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#单文件方式"><span class="toc-text">单文件方式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#包的分类管理和分类恢复"><span class="toc-text">包的分类管理和分类恢复</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#webpack-dev-server"><span class="toc-text">webpack-dev-server</span></a></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#开始使用"><span class="toc-text">开始使用</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1、package-json"><span class="toc-text">1、package.json:</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2、建立自己的main-js文件"><span class="toc-text">2、建立自己的main.js文件</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#3、当前目录下输入指令：npm-run-dev-进行打包"><span class="toc-text">3、当前目录下输入指令：npm run dev 进行打包</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#4、新建index-html，引入打包好的build文件"><span class="toc-text">4、新建index.html，引入打包好的build文件</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#1、package-json-1"><span class="toc-text">1、package.json</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2、webpack-dev-config-js"><span class="toc-text">2、webpack.dev.config.js</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#3、webpack-prod-config-js"><span class="toc-text">3、webpack.prod.config.js</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#1、package-json-2"><span class="toc-text">1、package.json</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2、webpack-dev-config-js-1"><span class="toc-text">2、webpack.dev.config.js</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#3、webpack-prod-config-js-1"><span class="toc-text">3、webpack.prod.config.js</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#1、package-json-3"><span class="toc-text">1、package.json</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2、webpack-dev-config-js-2"><span class="toc-text">2、webpack.dev.config.js</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#1、更新webpack-dev-config-js"><span class="toc-text">1、更新webpack.dev.config.js</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2、index-html，要在同级目录下放入相关的依赖"><span class="toc-text">2、index.html，要在同级目录下放入相关的依赖</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#1、package-json-4"><span class="toc-text">1、package.json</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2、webpack-dev-config-js-（规定那些文件需要babel处理）"><span class="toc-text">2、webpack.dev.config.js （规定那些文件需要babel处理）</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#1、package-json-5"><span class="toc-text">1、package.json</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2、webpack-dev-config-js-3"><span class="toc-text">2、webpack.dev.config.js</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#3、main-js-该打包会动态将资源加载在页面上"><span class="toc-text">3、main.js (该打包会动态将资源加载在页面上)</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#4、App-vue"><span class="toc-text">4、App.vue</span></a></li></ol></li></ol></li></ol></li></ol></li></ol>
</div>
    
</div>


<div class="search-field" id="search-field">
    <div class="search-container">
        <div class="search-input">
            <span id="esc-search"> <i class="icon-fanhui iconfont"></i></span>
            <input id="search-input"/>
            <span id="begin-search">搜索</span>
        </div>
        <div class="search-result-container" id="search-result-container">

        </div>
    </div>
</div>
        <div class="index-about-mobile">
            <i> 灵感来源于总结，成长来源于分享 </i>
        </div>
    </div>
    
    <div class="index-middle">
        <!-- Main Content -->
        


<div class="post-container">
    <div class="post-title">
        npm + webpack使用指南
    </div>

    <div class="post-meta">
        <span class="attr">发布于：<span>2018-06-17 14:34:11</span></span>
        
        <span class="attr">标签：/
        
        <a class="tag" href="/tags/#npm" title="npm">npm</a>
        <span>/</span>
        
        <a class="tag" href="/tags/#webpack" title="webpack">webpack</a>
        <span>/</span>
        
        
        </span>
        <span class="attr">访问：<span id="busuanzi_value_page_pv"></span>
</span>
</span>
    </div>
    <div class="post-content ">
        <p>欢迎来到我的个人技术博客！</p>
<h1 id="webpack简介"><a href="#webpack简介" class="headerlink" title="webpack简介"></a>webpack简介</h1><h4 id="历史介绍"><a href="#历史介绍" class="headerlink" title="历史介绍"></a>历史介绍</h4><ul>
<li>2009年初，commonjs规范还未出来，此时前端开发人员编写的代码都是非模块化的，<ul>
<li>那个时候开发人员经常需要十分留意文件加载顺序所带来的依赖问题</li>
</ul>
</li>
<li>与此同时 nodejs开启了js全栈大门，而requirejs在国外也带动着前端逐步实现模块化<ul>
<li>同时国内seajs也进行了大力推广</li>
<li>AMD 规范 ，具体实现是requirejs define(‘模块id’,[模块依赖1,模块依赖2],function(){  return ;}) , ajax请求文件并加载</li>
<li>Commonjs || CMD 规范 seajs 淘宝玉伯<ul>
<li>commonjs和cmd非常相似的<ul>
<li>cmd  require/module.exports</li>
</ul>
</li>
<li>commonjs是js在后端语言的规范: 模块、文件操作、操作系统底层</li>
<li>CMD 仅仅是模块定义</li>
</ul>
</li>
<li>UMD 通用模块定义，一种既能兼容amd也能兼容commonjs 也能兼容浏览器环境运行的万能代码</li>
</ul>
</li>
<li>npm/bower集中包管理的方式备受青睐，12年browserify/webpack诞生<ul>
<li>npm 是可以下载前后端的js代码475000个包</li>
<li>bower 只能下载前端的js代码,bower 在下载bootstrap的时候会自动的下载jquery</li>
<li>browserify 解决让require可以运行在浏览器，分析require的关系，组装代码</li>
<li>webpack 打包工具，占市场主流</li>
</ul>
</li>
</ul>
<blockquote>
<p>打包工作原理 </p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params">root, factory</span>) </span>&#123;  </span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> exports === <span class="string">'object'</span>) &#123; </span><br><span class="line">        <span class="built_in">module</span>.exports = factory();  <span class="comment">//commonjs环境下能拿到返回值</span></span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">typeof</span> define === <span class="string">'function'</span> ) &#123;  </span><br><span class="line">        define(factory);   <span class="comment">//define(function()&#123;return 'a'&#125;)  AMD</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;  </span><br><span class="line">        <span class="built_in">window</span>.eventUtil = factory();  </span><br><span class="line">    &#125;  </span><br><span class="line">&#125;)(<span class="keyword">this</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span><br><span class="line">    <span class="comment">// module  </span></span><br><span class="line">    <span class="keyword">return</span> &#123;  </span><br><span class="line">        <span class="comment">//具体模块代码</span></span><br><span class="line">        addEvent: <span class="function"><span class="keyword">function</span>(<span class="params">el, type, handle</span>) </span>&#123;  </span><br><span class="line">            <span class="comment">//...  </span></span><br><span class="line">        &#125;,  </span><br><span class="line">        removeEvent: <span class="function"><span class="keyword">function</span>(<span class="params">el, type, handle</span>) </span>&#123;  </span><br><span class="line">              </span><br><span class="line">        &#125;,  </span><br><span class="line">    &#125;;  </span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h4 id="webpack打包模块的源码"><a href="#webpack打包模块的源码" class="headerlink" title="webpack打包模块的源码"></a>webpack打包模块的源码</h4><ul>
<li>1:把所有模块的代码放入到函数中，用一个数组保存起来</li>
<li>2:根据require时传入的数组索引，能知道需要哪一段代码</li>
<li>3:从数组中，根据索引取出包含我们代码的函数</li>
<li>4:执行该函数，传入一个对象 module.exports</li>
<li>5:我们的代码，按照约定，正好是用module.exports = ‘xxxx’ 进行赋值</li>
<li>6:调用函数结束后，module.exports从原来的空对象，就有值了</li>
<li>7:最终return module.exports; 作为require函数的返回值</li>
</ul>
<h4 id="webpack配置文件"><a href="#webpack配置文件" class="headerlink" title="webpack配置文件"></a>webpack配置文件</h4><ul>
<li>在当前命令行的目录中，创建一个webpack.config.js文件</li>
<li>由于webpack是基于node,配置文件中的写法参照commonjs的模块导出</li>
</ul>
<h4 id="webpack-config-js文件配置（认识）"><a href="#webpack-config-js文件配置（认识）" class="headerlink" title="webpack.config.js文件配置（认识）"></a>webpack.config.js文件配置（认识）</h4><ul>
<li>entry 是一个对象，程序的入口<ul>
<li>key:随意写</li>
<li>value: 入口文件</li>
</ul>
</li>
<li>output 是一个对象,产出的资源<ul>
<li>key: filename</li>
<li>value : 生成的build.js</li>
</ul>
</li>
<li>module 模块（对象）<ul>
<li>loaders:[]<ul>
<li>存在一些loader   <code>{ test:正则,loader:&#39;style-loader!css-loader&#39;    }</code></li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="npm2-5以前"><a href="#npm2-5以前" class="headerlink" title="npm2.5以前"></a>npm2.5以前</h4><ul>
<li>各个包内包含node_modules,会导致目录层级很深，有些包下载的时候就会报错</li>
<li>npm2.5以后，安装的依赖包，就全部都是在平级根目录</li>
<li>npm run dev</li>
</ul>
<h4 id="处理css"><a href="#处理css" class="headerlink" title="处理css"></a>处理css</h4><ul>
<li>require(‘./xxx.css’);</li>
</ul>
<h4 id="处理less"><a href="#处理less" class="headerlink" title="处理less"></a>处理less</h4><ul>
<li><code>loader:&#39;style-loader!css-loader!less-loader&#39;</code></li>
</ul>
<h4 id="处理ES6"><a href="#处理ES6" class="headerlink" title="处理ES6"></a>处理ES6</h4><ul>
<li>babel是一个语法转换器,可以单独使用，也可以给打包工具结合起来使用</li>
<li>webpack  -&gt; babel-loader</li>
<li>browserify -&gt; babelify</li>
<li>可以转换es6/es7/react -&gt; es5</li>
<li>设置当前语法: preset(预设)  es2015</li>
<li>下载预设<ul>
<li>babel-loader + babel-preset-env(es2015/2016/2017)</li>
</ul>
</li>
<li>babel默认只转换语法部分 关键字 </li>
<li>函数部分需要插件支持</li>
</ul>
<h4 id="处理文件-base64"><a href="#处理文件-base64" class="headerlink" title="处理文件 + base64"></a>处理文件 + base64</h4><ul>
<li>url-loader 可以将文件生成为base64编码，到build.js中</li>
<li>文件在base64加密后会比原来大三分之一</li>
<li>应用场景是比较小的图片 4kb以内的图片</li>
</ul>
<h4 id="特殊符号"><a href="#特殊符号" class="headerlink" title="特殊符号"></a>特殊符号</h4><ul>
<li>! 分隔多个loader</li>
<li>字符串后跟上? 参数   key=value&amp;key=value</li>
<li>对象: options:{ key:value,key:value  }</li>
</ul>
<h4 id="字符串内使用的内置变量"><a href="#字符串内使用的内置变量" class="headerlink" title="字符串内使用的内置变量"></a>字符串内使用的内置变量</h4><ul>
<li>name: <code>[name].[ext]</code></li>
<li>name是获取原文件名,ext是获取原文件名的后缀</li>
<li>output:{   path:’绝对路径’, //设置产出的资源目录 ,filename:’build.js’}</li>
</ul>
<h4 id="处理html"><a href="#处理html" class="headerlink" title="处理html"></a>处理html</h4><ul>
<li>html-webpack-plugin</li>
<li>1:下载</li>
<li>2:在webpack.config.js文件中引入</li>
<li>3:plugins属性中，配置该对象</li>
<li>4:给其options设置template（参照物）</li>
</ul>
<h4 id="单文件方式"><a href="#单文件方式" class="headerlink" title="单文件方式"></a>单文件方式</h4><ul>
<li>依赖 vue-loader</li>
<li>vue-template-compiler</li>
</ul>
<h4 id="包的分类管理和分类恢复"><a href="#包的分类管理和分类恢复" class="headerlink" title="包的分类管理和分类恢复"></a>包的分类管理和分类恢复</h4><ul>
<li>1: 安装包的时候，做一个分类的管理   <ul>
<li>开发依赖（打包相关webpack） npm i 包名 -D  -&gt;      devDependencies</li>
<li>生产依赖（不包含webpack打包依赖） npm i  包名 -S  dependencies</li>
</ul>
</li>
<li>2: 恢复依赖<ul>
<li>如果包文件不小心删了，少了</li>
<li>开发恢复 <figure class="highlight plain"><figcaption><span>i ```</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">* 生产恢复 ```npm i --production</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
<h4 id="webpack-dev-server"><a href="#webpack-dev-server" class="headerlink" title="webpack-dev-server"></a>webpack-dev-server</h4><hr>
<h1 id="开始使用"><a href="#开始使用" class="headerlink" title="开始使用"></a>开始使用</h1><blockquote>
<p>webpack在npm管理器中使用：</p>
</blockquote>
<h5 id="1、package-json"><a href="#1、package-json" class="headerlink" title="1、package.json:"></a>1、package.json:</h5><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"code"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"description"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"main"</span>: <span class="string">"main.js"</span>,</span><br><span class="line">  <span class="attr">"scripts"</span>: &#123;</span><br><span class="line">    <span class="attr">"dev"</span>: <span class="string">"webpack ./main.js ./build.js"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"keywords"</span>: [],</span><br><span class="line">  <span class="attr">"author"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"license"</span>: <span class="string">"ISC"</span>,</span><br><span class="line">  <span class="attr">"dependencies"</span>: &#123;</span><br><span class="line">    <span class="attr">"webpack"</span>: <span class="string">"^3.6.0"</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h5 id="2、建立自己的main-js文件"><a href="#2、建立自己的main-js文件" class="headerlink" title="2、建立自己的main.js文件"></a>2、建立自己的main.js文件</h5><h5 id="3、当前目录下输入指令：npm-run-dev-进行打包"><a href="#3、当前目录下输入指令：npm-run-dev-进行打包" class="headerlink" title="3、当前目录下输入指令：npm run dev 进行打包"></a>3、当前目录下输入指令：npm run dev 进行打包</h5><h5 id="4、新建index-html，引入打包好的build文件"><a href="#4、新建index-html，引入打包好的build文件" class="headerlink" title="4、新建index.html，引入打包好的build文件"></a>4、新建index.html，引入打包好的build文件</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;title&gt;Document&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;div id=<span class="string">"app"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">  &lt;script type=<span class="string">"text/javascript"</span> src=<span class="string">"build.js"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line">&lt;<span class="regexp">/body&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>html&gt;</span><br></pre></td></tr></table></figure>
<hr>
<blockquote>
<p>npm中使用webpack：开发环境和生产环境分开部署（这里使用webpack的配置文件来打包）</p>
</blockquote>
<h5 id="1、package-json-1"><a href="#1、package-json-1" class="headerlink" title="1、package.json"></a>1、package.json</h5><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"code"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"description"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"main"</span>: <span class="string">"main.js"</span>,</span><br><span class="line">  <span class="attr">"scripts"</span>: &#123;</span><br><span class="line">    <span class="attr">"dev"</span>: <span class="string">"webpack --config ./webpack.dev.config.js"</span>,</span><br><span class="line">    <span class="attr">"prod"</span>: <span class="string">"webpack --config ./webpack.prod.config.js"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"keywords"</span>: [],</span><br><span class="line">  <span class="attr">"author"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"license"</span>: <span class="string">"ISC"</span>,</span><br><span class="line">  <span class="attr">"dependencies"</span>: &#123;</span><br><span class="line">    <span class="attr">"webpack"</span>: <span class="string">"^3.6.0"</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h5 id="2、webpack-dev-config-js"><a href="#2、webpack-dev-config-js" class="headerlink" title="2、webpack.dev.config.js"></a>2、webpack.dev.config.js</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">module</span>.<span class="keyword">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口</span></span><br><span class="line">  entry:&#123;</span><br><span class="line">    <span class="comment">// 可以有多个人口，也可以有一个，如果一个，就默认从这一个入口开始分析</span></span><br><span class="line">    <span class="string">'main'</span>:<span class="string">'./main.js'</span></span><br><span class="line">  &#125;,</span><br><span class="line">    <span class="comment">// 输出</span></span><br><span class="line">  output:&#123;</span><br><span class="line">      filename:<span class="string">'./build.js'</span></span><br><span class="line">  &#125;,</span><br><span class="line">  watch:<span class="keyword">true</span>, <span class="comment">//监视文件发生改动，自动产出Build.js</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h5 id="3、webpack-prod-config-js"><a href="#3、webpack-prod-config-js" class="headerlink" title="3、webpack.prod.config.js"></a>3、webpack.prod.config.js</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">module</span>.<span class="keyword">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口</span></span><br><span class="line">  entry:&#123;</span><br><span class="line">    <span class="comment">// 可以有多个人口，也可以有一个，如果一个，就默认从这一个入口开始分析</span></span><br><span class="line">    <span class="string">'main'</span>:<span class="string">'./main.js'</span></span><br><span class="line">  &#125;,</span><br><span class="line">    <span class="comment">// 输出</span></span><br><span class="line">  output:&#123;</span><br><span class="line">      filename:<span class="string">'./build.js'</span></span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<hr>
<blockquote>
<p>打包css样式与静态图片</p>
</blockquote>
<h5 id="1、package-json-2"><a href="#1、package-json-2" class="headerlink" title="1、package.json"></a>1、package.json</h5><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"code"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"description"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"main"</span>: <span class="string">"main.js"</span>,</span><br><span class="line">  <span class="attr">"scripts"</span>: &#123;</span><br><span class="line">    <span class="attr">"dev"</span>: <span class="string">"webpack --config ./webpack.dev.config.js"</span>,</span><br><span class="line">    <span class="attr">"prod"</span>: <span class="string">"webpack --config ./webpack.prod.config.js"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"keywords"</span>: [],</span><br><span class="line">  <span class="attr">"author"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"license"</span>: <span class="string">"ISC"</span>,</span><br><span class="line">  <span class="attr">"dependencies"</span>: &#123;</span><br><span class="line">    <span class="attr">"css-loader"</span>: <span class="string">"^0.28.11"</span>,</span><br><span class="line">    <span class="attr">"file-loader"</span>: <span class="string">"^1.1.11"</span>,</span><br><span class="line">    <span class="attr">"less-loader"</span>: <span class="string">"^4.1.0"</span>,</span><br><span class="line">    <span class="attr">"style-loader"</span>: <span class="string">"^0.21.0"</span>,</span><br><span class="line">    <span class="attr">"url-loader"</span>: <span class="string">"^1.0.1"</span>,</span><br><span class="line">    <span class="attr">"webpack"</span>: <span class="string">"^3.6.0"</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h5 id="2、webpack-dev-config-js-1"><a href="#2、webpack-dev-config-js-1" class="headerlink" title="2、webpack.dev.config.js"></a>2、webpack.dev.config.js</h5><figure class="highlight groovy"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">module.exports = &#123;</span><br><span class="line">  <span class="comment">// 入口</span></span><br><span class="line"><span class="symbol">  entry:</span>&#123;</span><br><span class="line">    <span class="comment">// 可以有多个人口，也可以有一个，如果一个，就默认从这一个入口开始分析</span></span><br><span class="line">    <span class="string">'main'</span>:<span class="string">'./main.js'</span></span><br><span class="line">  &#125;,</span><br><span class="line">    <span class="comment">// 输出</span></span><br><span class="line"><span class="symbol">  output:</span>&#123;</span><br><span class="line"><span class="symbol">      filename:</span><span class="string">'./build.js'</span></span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 生命模块，</span></span><br><span class="line">  <span class="comment">//  包含着各个loader</span></span><br><span class="line"><span class="symbol">  module:</span>&#123;</span><br><span class="line"><span class="symbol">      loaders:</span>[  <span class="comment">//webpack后面版本可以叫做roles，！表示从右往左加载</span></span><br><span class="line">          &#123; <span class="string">test:</span><span class="regexp">/\.css$/</span>,<span class="string">loader:</span><span class="string">'style-loader!css-loader'</span>  &#125;,</span><br><span class="line">          &#123; <span class="string">test:</span><span class="regexp">/\.(jpg|png|gif|svg)$/</span>,<span class="string">loader:</span><span class="string">'url-loader?limit=4096'</span>&#125;</span><br><span class="line">          <span class="comment">// 如果文件大于limit 生成一个文件</span></span><br><span class="line">          <span class="comment">// 小于limit 则生成base64到build.js中</span></span><br><span class="line">          <span class="comment">// 建议比较小的图片，使用base64的方式</span></span><br><span class="line">      ] </span><br><span class="line">  &#125;,</span><br><span class="line"><span class="symbol">  watch:</span><span class="literal">true</span>, <span class="comment">//监视文件发生改动，自动产出Build.js</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h5 id="3、webpack-prod-config-js-1"><a href="#3、webpack-prod-config-js-1" class="headerlink" title="3、webpack.prod.config.js"></a>3、webpack.prod.config.js</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">module</span>.<span class="keyword">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口</span></span><br><span class="line">  entry:&#123;</span><br><span class="line">    <span class="comment">// 可以有多个人口，也可以有一个，如果一个，就默认从这一个入口开始分析</span></span><br><span class="line">    <span class="string">'main'</span>:<span class="string">'./main.js'</span></span><br><span class="line">  &#125;,</span><br><span class="line">    <span class="comment">// 输出</span></span><br><span class="line">  output:&#123;</span><br><span class="line">      filename:<span class="string">'./build.js'</span></span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<hr>
<blockquote>
<p>打包加载less（base64格式）</p>
</blockquote>
<h5 id="1、package-json-3"><a href="#1、package-json-3" class="headerlink" title="1、package.json"></a>1、package.json</h5><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"code"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"description"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"main"</span>: <span class="string">"main.js"</span>,</span><br><span class="line">  <span class="attr">"scripts"</span>: &#123;</span><br><span class="line">    <span class="attr">"dev"</span>: <span class="string">"webpack --config ./webpack.dev.config.js"</span>,</span><br><span class="line">    <span class="attr">"prod"</span>: <span class="string">"webpack --config ./webpack.prod.config.js"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"keywords"</span>: [],</span><br><span class="line">  <span class="attr">"author"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"license"</span>: <span class="string">"ISC"</span>,</span><br><span class="line">  <span class="attr">"dependencies"</span>: &#123;</span><br><span class="line">    <span class="attr">"css-loader"</span>: <span class="string">"^0.28.11"</span>,</span><br><span class="line">    <span class="attr">"file-loader"</span>: <span class="string">"^1.1.11"</span>,</span><br><span class="line">    <span class="attr">"less"</span>: <span class="string">"^3.0.4"</span>,</span><br><span class="line">    <span class="attr">"less-loader"</span>: <span class="string">"^4.1.0"</span>,</span><br><span class="line">    <span class="attr">"style-loader"</span>: <span class="string">"^0.21.0"</span>,</span><br><span class="line">    <span class="attr">"url-loader"</span>: <span class="string">"^1.0.1"</span>,</span><br><span class="line">    <span class="attr">"webpack"</span>: <span class="string">"^3.6.0"</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h5 id="2、webpack-dev-config-js-2"><a href="#2、webpack-dev-config-js-2" class="headerlink" title="2、webpack.dev.config.js"></a>2、webpack.dev.config.js</h5><figure class="highlight groovy"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">const path = require(<span class="string">'path'</span>);</span><br><span class="line">module.exports = &#123;</span><br><span class="line">  <span class="comment">// 入口</span></span><br><span class="line"><span class="symbol">  entry:</span>&#123;</span><br><span class="line">    <span class="comment">// 可以有多个人口，也可以有一个，如果一个，就默认从这一个入口开始分析</span></span><br><span class="line">    <span class="string">'main'</span>:<span class="string">'./src/main.js'</span></span><br><span class="line">  &#125;,</span><br><span class="line">    <span class="comment">// 输出</span></span><br><span class="line"><span class="symbol">  output:</span>&#123;</span><br><span class="line">      <span class="comment">// 指定产出的目录</span></span><br><span class="line"><span class="symbol">      path:</span>path.resolve(<span class="string">'./dist'</span>), <span class="comment">// 相对转绝对</span></span><br><span class="line"><span class="symbol">      filename:</span><span class="string">'build.js'</span></span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 生命模块，</span></span><br><span class="line">  <span class="comment">//  包含着各个loader</span></span><br><span class="line"><span class="symbol">  module:</span>&#123;</span><br><span class="line"><span class="symbol">      loaders:</span>[  <span class="comment">//webpack后面版本可以叫做roles</span></span><br><span class="line">          &#123; <span class="string">test:</span><span class="regexp">/\.css$/</span>,<span class="string">loader:</span><span class="string">'style-loader!css-loader'</span>  &#125;,</span><br><span class="line">          &#123; <span class="string">test:</span><span class="regexp">/\.(jpg|png|gif|svg)$/</span>,<span class="string">loader:</span><span class="string">'url-loader?limit=99999'</span>&#125;,</span><br><span class="line">          <span class="comment">// 如果文件大于limit 生成一个文件</span></span><br><span class="line">          <span class="comment">// 小于limit 则声称base64到build.js中</span></span><br><span class="line">          <span class="comment">// 建议比较小的图片，使用base64的方式</span></span><br><span class="line">          &#123; <span class="string">test:</span><span class="regexp">/\.less$/</span>,<span class="string">loader:</span><span class="string">'style-loader!css-loader!less-loader'</span> &#125;</span><br><span class="line">      ] </span><br><span class="line">  &#125;,</span><br><span class="line"><span class="symbol">  watch:</span><span class="literal">true</span>, <span class="comment">//监视文件发生改动，自动产出Build.js</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<hr>
<blockquote>
<p>在上边的基础上配置插件plugins</p>
</blockquote>
<h5 id="1、更新webpack-dev-config-js"><a href="#1、更新webpack-dev-config-js" class="headerlink" title="1、更新webpack.dev.config.js"></a>1、更新webpack.dev.config.js</h5><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>);</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">'html-webpack-plugin'</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 入口</span></span><br><span class="line">  entry:&#123;</span><br><span class="line">    <span class="comment">// 可以有多个人口，也可以有一个，如果一个，就默认从这一个入口开始分析</span></span><br><span class="line">    <span class="string">'main'</span>:<span class="string">'./src/main.js'</span></span><br><span class="line">  &#125;,</span><br><span class="line">    <span class="comment">// 输出</span></span><br><span class="line">  output:&#123;</span><br><span class="line">      <span class="comment">// 指定产出的目录</span></span><br><span class="line">      path:path.resolve(<span class="string">'./dist'</span>), <span class="comment">// 相对转绝对</span></span><br><span class="line">      filename:<span class="string">'build.js'</span></span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 生命模块，</span></span><br><span class="line">  <span class="comment">//  包含着各个loader</span></span><br><span class="line">  <span class="keyword">module</span>:&#123;</span><br><span class="line">      loaders:[  <span class="comment">//webpack后面版本可以叫做roles</span></span><br><span class="line">          &#123; test:<span class="regexp">/\.css$/</span>,loader:<span class="string">'style-loader!css-loader'</span>  &#125;,</span><br><span class="line">          &#123; test:<span class="regexp">/\.(jpg|png|gif|svg)$/</span>,loader:<span class="string">'url-loader?limit=99999'</span>&#125;,</span><br><span class="line">          <span class="comment">// 如果文件大于limit 生成一个文件</span></span><br><span class="line">          <span class="comment">// 小于limit 则声称base64到build.js中</span></span><br><span class="line">          <span class="comment">// 建议比较小的图片，使用base64的方式</span></span><br><span class="line">          &#123; test:<span class="regexp">/\.less$/</span>,loader:<span class="string">'style-loader!css-loader!less-loader'</span> &#125;</span><br><span class="line">      ] </span><br><span class="line">  &#125;,</span><br><span class="line">  watch:<span class="literal">true</span>, <span class="comment">//监视文件发生改动，自动产出Build.js</span></span><br><span class="line">  plugins:[</span><br><span class="line">  <span class="comment">// 插件的执行顺序与元素索引有关，此时会自动打包index页面和相关的依赖到dist目录下</span></span><br><span class="line">    <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">      template:<span class="string">'./src/index.html'</span>, <span class="comment">//参照物</span></span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h5 id="2、index-html，要在同级目录下放入相关的依赖"><a href="#2、index-html，要在同级目录下放入相关的依赖" class="headerlink" title="2、index.html，要在同级目录下放入相关的依赖"></a>2、index.html，要在同级目录下放入相关的依赖</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;title&gt;Document&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;div id=<span class="string">"app"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;<span class="regexp">/body&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>html&gt;</span><br></pre></td></tr></table></figure>
<hr>
<blockquote>
<p>使用babel + webpack-dev-server（自动打开本地8080端口，建立一个服务器进行调试）</p>
</blockquote>
<h5 id="1、package-json-4"><a href="#1、package-json-4" class="headerlink" title="1、package.json"></a>1、package.json</h5><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"code"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"description"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"main"</span>: <span class="string">"main.js"</span>,</span><br><span class="line">  <span class="attr">"scripts"</span>: &#123;</span><br><span class="line">    <span class="attr">"dev"</span>: <span class="string">"webpack-dev-server --open --hot --inline --config ./webpack.dev.config.js"</span>,</span><br><span class="line">    <span class="attr">"prod"</span>: <span class="string">"webpack --config ./webpack.prod.config.js"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"keywords"</span>: [],</span><br><span class="line">  <span class="attr">"author"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"license"</span>: <span class="string">"ISC"</span>,</span><br><span class="line">  <span class="attr">"dependencies"</span>: &#123;</span><br><span class="line">    <span class="attr">"babel-core"</span>: <span class="string">"^6.26.3"</span>,</span><br><span class="line">    <span class="attr">"babel-loader"</span>: <span class="string">"^7.1.4"</span>,</span><br><span class="line">    <span class="attr">"babel-plugin-transform-runtime"</span>: <span class="string">"^6.23.0"</span>,</span><br><span class="line">    <span class="attr">"babel-preset-env"</span>: <span class="string">"^1.7.0"</span>,</span><br><span class="line">    <span class="attr">"css-loader"</span>: <span class="string">"^0.28.11"</span>,</span><br><span class="line">    <span class="attr">"file-loader"</span>: <span class="string">"^1.1.11"</span>,</span><br><span class="line">    <span class="attr">"html-webpack-plugin"</span>: <span class="string">"^3.2.0"</span>,</span><br><span class="line">    <span class="attr">"less"</span>: <span class="string">"^3.0.4"</span>,</span><br><span class="line">    <span class="attr">"less-loader"</span>: <span class="string">"^4.1.0"</span>,</span><br><span class="line">    <span class="attr">"style-loader"</span>: <span class="string">"^0.21.0"</span>,</span><br><span class="line">    <span class="attr">"url-loader"</span>: <span class="string">"^1.0.1"</span>,</span><br><span class="line">    <span class="attr">"webpack"</span>: <span class="string">"^3.6.0"</span>,</span><br><span class="line">    <span class="attr">"webpack-dev-server"</span>: <span class="string">"^2.9.0"</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h5 id="2、webpack-dev-config-js-（规定那些文件需要babel处理）"><a href="#2、webpack-dev-config-js-（规定那些文件需要babel处理）" class="headerlink" title="2、webpack.dev.config.js （规定那些文件需要babel处理）"></a>2、webpack.dev.config.js （规定那些文件需要babel处理）</h5><figure class="highlight groovy"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line">const path = require(<span class="string">'path'</span>);</span><br><span class="line">const HtmlWebpackPlugin = require(<span class="string">'html-webpack-plugin'</span>);</span><br><span class="line"></span><br><span class="line">module.exports = &#123;</span><br><span class="line">  <span class="comment">// 入口</span></span><br><span class="line"><span class="symbol">  entry:</span>&#123;</span><br><span class="line">    <span class="comment">// 可以有多个人口，也可以有一个，如果一个，就默认从这一个入口开始分析</span></span><br><span class="line">    <span class="string">'main'</span>:<span class="string">'./src/main.js'</span></span><br><span class="line">  &#125;,</span><br><span class="line">    <span class="comment">// 输出</span></span><br><span class="line"><span class="symbol">  output:</span>&#123;</span><br><span class="line">      <span class="comment">// 指定产出的目录</span></span><br><span class="line"><span class="symbol">      path:</span>path.resolve(<span class="string">'./dist'</span>), <span class="comment">// 相对转绝对</span></span><br><span class="line"><span class="symbol">      filename:</span><span class="string">'build.js'</span></span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 生命模块，</span></span><br><span class="line">  <span class="comment">//  包含着各个loader</span></span><br><span class="line"><span class="symbol">  module:</span>&#123;</span><br><span class="line"><span class="symbol">      loaders:</span>[  <span class="comment">//webpack后面版本可以叫做roles</span></span><br><span class="line">          &#123; <span class="string">test:</span><span class="regexp">/\.css$/</span>,<span class="string">loader:</span><span class="string">'style-loader!css-loader'</span>  &#125;,</span><br><span class="line">          &#123; <span class="string">test:</span><span class="regexp">/\.(jpg|png|gif|svg)$/</span>,<span class="string">loader:</span><span class="string">'url-loader?limit=99999'</span>&#125;,</span><br><span class="line">          <span class="comment">// 如果文件大于limit 生成一个文件</span></span><br><span class="line">          <span class="comment">// 小于limit 则声称base64到build.js中</span></span><br><span class="line">          <span class="comment">// 建议比较小的图片，使用base64的方式</span></span><br><span class="line">          &#123; <span class="string">test:</span><span class="regexp">/\.less$/</span>,<span class="string">loader:</span><span class="string">'style-loader!css-loader!less-loader'</span> &#125;,</span><br><span class="line">           &#123; <span class="string">test:</span><span class="regexp">/\.js$/</span>,<span class="string">loader:</span><span class="string">'babel-loader'</span>,</span><br><span class="line"><span class="symbol">            exclude:</span><span class="regexp">/node_modules/</span>, <span class="comment">// 排除包含node_modules目录</span></span><br><span class="line"><span class="symbol">            options:</span>&#123;</span><br><span class="line"><span class="symbol">              presets:</span>[<span class="string">'env'</span>], <span class="comment">//处理关键字，配置启用环境（只编译哪些es5不支持的环境）</span></span><br><span class="line"><span class="symbol">              plugins:</span>[<span class="string">'transform-runtime'</span>],<span class="comment">//处理函数</span></span><br><span class="line">          &#125; &#125;,</span><br><span class="line"></span><br><span class="line">          <span class="comment">//处理vue </span></span><br><span class="line">          &#123; <span class="string">test:</span><span class="regexp">/\.vue$/</span>,<span class="string">loader:</span><span class="string">'vue-loader'</span>&#125;</span><br><span class="line">      ] </span><br><span class="line">  &#125;,</span><br><span class="line"><span class="symbol">  plugins:</span>[</span><br><span class="line">  <span class="comment">// 插件的执行顺序与元素索引有关</span></span><br><span class="line">    <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line"><span class="symbol">      template:</span><span class="string">'./src/index.html'</span>, <span class="comment">//参照物</span></span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<hr>
<blockquote>
<p>打包vue</p>
</blockquote>
<h5 id="1、package-json-5"><a href="#1、package-json-5" class="headerlink" title="1、package.json"></a>1、package.json</h5><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"code"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"description"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"main"</span>: <span class="string">"main.js"</span>,</span><br><span class="line">  <span class="attr">"scripts"</span>: &#123;</span><br><span class="line">    <span class="attr">"dev"</span>: <span class="string">"webpack-dev-server --open --hot --inline --config ./webpack.dev.config.js"</span>,</span><br><span class="line">    <span class="attr">"prod"</span>: <span class="string">"webpack --config ./webpack.prod.config.js"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"keywords"</span>: [],</span><br><span class="line">  <span class="attr">"author"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"license"</span>: <span class="string">"ISC"</span>,</span><br><span class="line">  <span class="attr">"dependencies"</span>: &#123;</span><br><span class="line">    <span class="attr">"babel-core"</span>: <span class="string">"^6.26.3"</span>,</span><br><span class="line">    <span class="attr">"babel-loader"</span>: <span class="string">"^7.1.4"</span>,</span><br><span class="line">    <span class="attr">"babel-plugin-transform-runtime"</span>: <span class="string">"^6.23.0"</span>,</span><br><span class="line">    <span class="attr">"babel-preset-env"</span>: <span class="string">"^1.7.0"</span>,</span><br><span class="line">    <span class="attr">"css-loader"</span>: <span class="string">"^0.28.11"</span>,</span><br><span class="line">    <span class="attr">"file-loader"</span>: <span class="string">"^1.1.11"</span>,</span><br><span class="line">    <span class="attr">"html-webpack-plugin"</span>: <span class="string">"^3.2.0"</span>,</span><br><span class="line">    <span class="attr">"less"</span>: <span class="string">"^3.0.4"</span>,</span><br><span class="line">    <span class="attr">"less-loader"</span>: <span class="string">"^4.1.0"</span>,</span><br><span class="line">    <span class="attr">"style-loader"</span>: <span class="string">"^0.21.0"</span>,</span><br><span class="line">    <span class="attr">"url-loader"</span>: <span class="string">"^1.0.1"</span>,</span><br><span class="line">    <span class="attr">"vue-loader"</span>: <span class="string">"^14.1.1"</span>,</span><br><span class="line">    <span class="attr">"vue-template-compiler"</span>: <span class="string">"^2.5.16"</span>,</span><br><span class="line">    <span class="attr">"webpack"</span>: <span class="string">"^3.6.0"</span>,</span><br><span class="line">    <span class="attr">"webpack-dev-server"</span>: <span class="string">"^2.9.0"</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h5 id="2、webpack-dev-config-js-3"><a href="#2、webpack-dev-config-js-3" class="headerlink" title="2、webpack.dev.config.js"></a>2、webpack.dev.config.js</h5><figure class="highlight groovy"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line">const path = require(<span class="string">'path'</span>);</span><br><span class="line">const HtmlWebpackPlugin = require(<span class="string">'html-webpack-plugin'</span>);</span><br><span class="line"></span><br><span class="line">module.exports = &#123;</span><br><span class="line">  <span class="comment">// 入口</span></span><br><span class="line"><span class="symbol">  entry:</span>&#123;</span><br><span class="line">    <span class="comment">// 可以有多个人口，也可以有一个，如果一个，就默认从这一个入口开始分析</span></span><br><span class="line">    <span class="string">'main'</span>:<span class="string">'./src/main.js'</span></span><br><span class="line">  &#125;,</span><br><span class="line">    <span class="comment">// 输出</span></span><br><span class="line"><span class="symbol">  output:</span>&#123;</span><br><span class="line">      <span class="comment">// 指定产出的目录</span></span><br><span class="line"><span class="symbol">      path:</span>path.resolve(<span class="string">'./dist'</span>), <span class="comment">// 相对转绝对</span></span><br><span class="line"><span class="symbol">      filename:</span><span class="string">'build.js'</span></span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 生命模块，</span></span><br><span class="line">  <span class="comment">//  包含着各个loader</span></span><br><span class="line"><span class="symbol">  module:</span>&#123;</span><br><span class="line"><span class="symbol">      loaders:</span>[  <span class="comment">//webpack后面版本可以叫做roles</span></span><br><span class="line">          &#123; <span class="string">test:</span><span class="regexp">/\.css$/</span>,<span class="string">loader:</span><span class="string">'style-loader!css-loader'</span>  &#125;,</span><br><span class="line">          &#123; <span class="string">test:</span><span class="regexp">/\.(jpg|png|gif|svg)$/</span>,<span class="string">loader:</span><span class="string">'url-loader?limit=99999'</span>&#125;,</span><br><span class="line">          <span class="comment">// 如果文件大于limit 生成一个文件</span></span><br><span class="line">          <span class="comment">// 小于limit 则声称base64到build.js中</span></span><br><span class="line">          <span class="comment">// 建议比较小的图片，使用base64的方式</span></span><br><span class="line">          &#123; <span class="string">test:</span><span class="regexp">/\.less$/</span>,<span class="string">loader:</span><span class="string">'style-loader!css-loader!less-loader'</span> &#125;,</span><br><span class="line">           &#123; <span class="string">test:</span><span class="regexp">/\.js$/</span>,<span class="string">loader:</span><span class="string">'babel-loader'</span>,</span><br><span class="line"><span class="symbol">            exclude:</span><span class="regexp">/node_modules/</span>, <span class="comment">// 排除包含node_modules目录</span></span><br><span class="line"><span class="symbol">            options:</span>&#123;</span><br><span class="line"><span class="symbol">              presets:</span>[<span class="string">'env'</span>], <span class="comment">//处理关键字</span></span><br><span class="line"><span class="symbol">              plugins:</span>[<span class="string">'transform-runtime'</span>],<span class="comment">//处理函数（模块复用工具）</span></span><br><span class="line">          &#125; &#125;,</span><br><span class="line"></span><br><span class="line">          <span class="comment">//处理vue </span></span><br><span class="line">          &#123; <span class="string">test:</span><span class="regexp">/\.vue$/</span>,<span class="string">loader:</span><span class="string">'vue-loader'</span>&#125;</span><br><span class="line">      ] </span><br><span class="line">  &#125;,</span><br><span class="line"><span class="symbol">  plugins:</span>[</span><br><span class="line">  <span class="comment">// 插件的执行顺序与元素索引有关</span></span><br><span class="line">    <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line"><span class="symbol">      template:</span><span class="string">'./src/index.html'</span>, <span class="comment">//参照物</span></span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h5 id="3、main-js-该打包会动态将资源加载在页面上"><a href="#3、main-js-该打包会动态将资源加载在页面上" class="headerlink" title="3、main.js (该打包会动态将资源加载在页面上)"></a>3、main.js (该打包会动态将资源加载在页面上)</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span>; <span class="comment">// node_modules 下面的vue</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">'./App.vue'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  el:<span class="string">'#app'</span>,</span><br><span class="line">  render:<span class="function"><span class="params">c</span>=&gt;</span>c(App)</span><br><span class="line">  <span class="comment">// components:&#123;</span></span><br><span class="line">  <span class="comment">//   app:App</span></span><br><span class="line">  <span class="comment">// &#125;,</span></span><br><span class="line">  <span class="comment">// template:`&lt;app/&gt;</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h5 id="4、App-vue"><a href="#4、App-vue" class="headerlink" title="4、App.vue"></a>4、App.vue</h5><figure class="highlight django"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">    </span><span class="template-variable">&#123;&#123;text&#125;&#125;</span><span class="xml"></span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span></span><br><span class="line"><span class="xml">  export default &#123;</span></span><br><span class="line"><span class="xml">    data()&#123;</span></span><br><span class="line"><span class="xml">      return &#123;</span></span><br><span class="line"><span class="xml">        text:'hello'</span></span><br><span class="line"><span class="xml">      &#125;</span></span><br><span class="line"><span class="xml">    &#125;</span></span><br><span class="line"><span class="xml">  &#125;</span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span></span><br><span class="line"><span class="xml">  body &#123;</span></span><br><span class="line"><span class="xml">    background-color: yellowgreen;</span></span><br><span class="line"><span class="xml">  &#125;</span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

        
            <div class="donate-container">
    <div class="donate-button">
        <button id="donate-button">赞赏</button>
    </div>
    <div class="donate-img-container hide" id="donate-img-container">
        <img id="donate-img" src="" data-src="/img/donate.jpg">
        <p> 感谢鼓励 </p>
    </div>
</div>
        
        <div id="comment-container">
        </div>
    </div>
</div>
    </div>
</div>

<footer class="footer">
    <ul class="list-inline text-center">
        
        

        
        <li>
            <a target="_blank" href="http://weibo.com/5216026690">
                            <span class="fa-stack fa-lg">
                                  <i class="iconfont icon-weibo"></i>
                            </span>
            </a>
        </li>
        

        
        <li>
            <a target="_blank" href="https://www.facebook.com/853788089@qq.com">
                            <span class="fa-stack fa-lg">
                                <i class="iconfont icon-facebook"></i>
                            </span>
            </a>
        </li>
        

        
        <li>
            <a target="_blank"  href="https://gitee.com/dh1992">
                            <span class="fa-stack fa-lg">
                                <i class="iconfont icon-github"></i>
                            </span>
            </a>
        </li>
        

        

    </ul>
    
    <p>
        <span>/</span>
        
        <span><a href="https://www.baidu.com">baidu</a></span>
        <span>/</span>
        
        <span><a href="#">Duheng&#39;s Page</a></span>
        <span>/</span>
        
        <span><a href="#">It helps SEO</a></span>
        <span>/</span>
        
    </p>
    
    
</footer>




</body>

<script>
    // We expose some of the variables needed by the front end
    window.hexo_search_path = "search.json"
    window.hexo_root = "/"
    window.isPost = true
</script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="/js/index.js"></script>
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

<script src="/js/gitment.js"></script>
<script>
    var gitment = new Gitment({
        id: 'npm + webpack使用指南',
        owner: 'aircloud',
        repo: 'hexo-aircloud-blog',
        oauth: {
            client_id: 'your-id-created-by-https://github.com/settings/applications/new',
            client_secret: 'your-secret-created-by-https://github.com/settings/applications/new',
        },
    })
    gitment.render('comment-container')
</script>

</html>
